<template>
  <div class="mine">
    <van-nav-bar title="我的音乐">
      <template #right>
        <van-icon name="bars" size="18" badge="9" />
      </template>
    </van-nav-bar>

    <van-grid :column-num="4">
      <van-grid-item icon="music-o" text="本地/下载" />
      <van-grid-item icon="upgrade" text="云盘" />
      <van-grid-item icon="sign" text="已购" />
      <van-grid-item icon="play-circle-o" text="最近播放" />
      <van-grid-item icon="friends-o" text="我的好友" />
      <van-grid-item icon="star-o" text="收藏和赞" />
      <van-grid-item icon="bullhorn-o" text="电音专区" />
      <van-grid-item icon="service-o" text="Dj专区" />
    </van-grid>
    <div class="mylike">
      <div class="mylike-left">
        <img
          src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202103%2F06%2F20210306210053_b1fb1.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1638413967&t=c02207857cbeb4d864f91f5534c9fec2"
          alt=""
        />
      </div>
      <div class="mylike-right">
        <p>我喜欢的音乐</p>
        <span>128首</span>
      </div>
    </div>

    <van-grid direction="horizontal" :column-num="3">
      <van-grid-item icon="" text="创建歌单" @click="creatlist(uid)" />
      <van-grid-item icon="" text="收藏歌单" @click="liststar(uid)" />
      <van-grid-item icon="" text="歌单助手" @click="listhelper(uid)" />
    </van-grid>
    <div class="songbox">
      <p>推荐歌单<van-icon name="replay" color="red" @click="reload" /></p>
      <div class="songlist">
        <div class="songimgbox" v-for="item in toplist" :key="item.id">
          <div class="songtag">
            <img
              :src="item.coverImgUrl"
              :title="item.name"
              @click="detail(item.id)"
            />
          </div>
          <p>{{ item.name }}</p>
        </div>
      </div>
    </div>
  </div>
  
</template>
  
<script>
import {playlistAPI} from "@/api/mine.js"
export default {
  data() {
    return {
      active: 0,
       toplist: [],
    };
  },
  computed: {},
  watch: {},

  methods: {
    //跳转创建歌单
    creatlist(id) {
      this.$router.push("/creatlist/" + id);
    },
    //跳转歌单收藏
    liststar(id) {
      this.$router.push("/liststar/" + id);
    },
    //跳转歌单助手
    listhelper(id) {
      this.$router.push("/listhelper/" + id);
    },
    //刷新推荐歌单
    reload() {
      const params = { limit: 10 };
      this.playlist(params);
    },
    //获取歌单(网友精选碟)
    async playlist(params) {
      const result = await playlistAPI(params);
      console.log(result, "zfc22");
      if (result.status === 200) {
        this.toplist = result.data.playlists;
      }
    },

  },
  created() {
    const params = { limit: 10 };
    this.playlist(params);
    
  },
  mounted() {},
  components: {},
};
</script>
<style scoped>
.mine {
  height: 100%;
  background-color: #ccc;
}
.van-grid {
  margin: 20px;
}
.mylike {
  margin: 20px 0;
  height: 100px;
}
.mylike-left img {
  width: 80px;
  height: 80px;
  float: left;
}
.mylike-left {
  float: left;
  margin-left: 20px;
  height: 50px;
}
.mylike-right {
  float: left;
  margin-left: 10px;
}
.mylike-right p {
}
.mylike-right span {
  font-size: 12px;
}
.songimgbox {
  text-align: center;
  width: 100px;
  height: 100px;
  font-size: 12px;
  margin-left: 10px;
}
.songtag {
  width: 100px;
  height: 100px;
  text-align: center;
  border-radius: 10px;
  overflow: hidden;
}
.songimgbox p {
  width: 100px;
  margin-top: 5px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.songlist {
  width: 100%;
  height: 140px;
  display: flex;
  overflow-x: scroll;

  /* overflow-x: visible; */
}
.songbox {
  height: 180px;
  overflow: hidden;
  background-color: #fff;
  border-radius: 0 0 10px 10px;
  border-top: 1px solid #cccccc;
}
.songbox > p {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 10px;
  margin-left: 10px;
  margin-top: 10px;
}
.songlist-webkit-scrollbar {
  width: 0;
}
</style>
